<template>
  <div class="app">
    <div class="details">
      <div style="display: flex;flex-direction: row;align-items: center;">
        <choose-status-botton :docForm="docForm"></choose-status-botton>
        <el-button @click="startClick" style="margin-left: 10px;" type="primary" plain v-if="docForm.modelId && docForm.createBy===$store.getters.sysUser.userId && docForm.status != '02' && docForm.status != '04'">发起审批</el-button>
      </div>
      <div class="details-header-button" v-if="!executeTaskId">
        <singlefileUpload v-if="componentsType == 'management'" ref="upload" @uploadSave="uploadSave" @returnUrl="returnUrl" :ruleFormdocFilePath='docForm.docFilePath' @uploadListDel="uploadListDel">
          <template v-slot:openDialog>
            <!-- <el-tooltip effect="dark" content="添加附件" placement="top-start">
                <i class="details-header-button-icon iconfont icon-fujian-copy"></i>
            </el-tooltip> -->
            <el-button size="mini">添加附件</el-button>
          </template>
        </singlefileUpload>
        <i class="details-header-button-icon el-icon-refresh-right" @click="refreshClick" :class="[refreshLoading == true?'refreshRe':'']"></i>
        <i class="details-header-button-icon el-icon-edit" v-permission="'doc:form:edit'" @click="edidClick"></i>
        <i class="details-header-button-icon el-icon-delete" v-permission="'doc:form:del'" @click="deteleClick"></i>
      </div>
    </div>
    <!-- 执行任务 -->

    <CCExecuteTask v-if="!executeTaskId&&ccToMe" :processInstanceId="processInstanceId"></CCExecuteTask>
    <img :src="imagePath" style="width:800px" v-if="docForm.processInstanceId&&mySelf==true">
    <div class="details-content">
      <span class="details-content-title">{{docForm.name}}</span>
      <div class="details-content-misc">
        <div class="item">
          <span class="details-content-misc-name">{{docForm.createBy}}</span>
        </div>
        <div class="item">
                    <span class="details-content-misc-subtitle" v-if="docForm.createTime"> 创建于
                        {{docForm.createTime}}</span>
        </div>
        <div class="item">
                    <span class="details-content-misc-subtitle" v-if="docForm.updateTime">, 最近更新于
                        {{docForm.updateTime}}</span>
        </div>
      </div>
      <div class="details-content-richtext">
        <span>{{docForm.content}}</span>
      </div>
      <div class="details-content-fields" v-if="formData">
        <parser :value="docForm.formData" :form-conf="formData" ref="parser" />
        <div class="details-content-isMask"></div>
      </div>
      <execute-task v-if="executeTaskId" :processInstanceId="processInstanceId" :visible.sync="dialogExcuteTaskVisible" :executeTaskId="executeTaskId"></execute-task>

      <el-tabs v-model="operation">
        <el-tab-pane label="附件" name="second">
          <div class="details-content-subtask" v-if="docForm.docFilePath && docForm.docFilePath.length > 0">
            <div class="details-content-operation-item" v-for="(items,index) in docForm.docFilePath">
              <i class="iconfont icon-fujian-copy task-enclosure-icon" @click="fileClick(items)"></i>
              <span class="task-enclosure-title">{{items.fileName}}</span>
            </div>
          </div>
          <!-- <div class="details-content-operation-item" v-for="item in operationLog">
  <i class="el-icon-edit details-content-operation-item-icon"></i>
  <span class="details-content-operation-item-name">{{item.createName}}</span>
  <span class="details-content-operation-item-title">{{item.content}}</span>
  <span class="details-content-operation-item-date">{{item.createTime}}</span>
</div>
<el-empty v-if="operationLog && operationLog.length == 0" description="暂无日志"></el-empty> -->
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { queryById, softDelete, processStart, procDoc ,update} from "@/api/doc.js";
import chooseStatusBotton from "../../../components/chooseStatus/docStasus.vue";
import utils from "../../../utils/utils.js";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import Parser from "@/components/FormGenerator/components/parser";
import { list as logList } from "@/api/log.js";
import { Message } from "element-ui";
import ExecuteTask from "@/components/task/ExecuteTask.vue";
import CCExecuteTask from "@/components/task/CCExecuteTask.vue";
import singlefileUpload from "@/components/upload/singlefileUpload";
export default {
  name: "DocumentDetails",
  data() {
    return {
      refreshLoading: false,
      operation: "second",
      operationLog: [],
      docForm: { modelId: "" },
      formData: "",
      executeTaskId: "",
      dialogExcuteTaskVisible: false,
      processInstanceId: "",
      ccToMe: false,
      imagePath: "",
      mySelf: false,
      uploadForm: [],
      componentsType:''
    };
  },
  components: {
    chooseStatusBotton,
    Parser,
    ExecuteTask,
    CCExecuteTask,
    singlefileUpload
  },
  filters: {},
  created() {
    var queryData = JSON.parse(this.$route.query.data);
    if (queryData.mySelf) {
      this.mySelf = queryData.mySelf;
    }
    if (queryData.docId) {
      this.docForm.docId = queryData.docId;
      if (queryData.type) {
        this.processInstanceId = queryData.id;
        if (queryData.type == "ccToMe") {
          this.ccToMe = true;
        }
      }
      this.queryClick();
    }
    if (queryData.processInstanceId) {
      this.processInstanceId = queryData.processInstanceId;
      this.executeTaskId = queryData.executeTaskId;
      this.toDoQueryClick();
    }
    if(queryData.componentsType){
      this.componentsType = queryData.componentsType
    }else {
      this.componentsType = ''
    }
  },
  methods: {
    showImage() {
      if (!this.imagePath) {
        this.imagePath =
            `${process.env.VUE_APP_BASE_API}` +
            "/flowable/processInstanceImage?processInstanceId=" +
            this.docForm.processInstanceId +
            "&access_token=" +
            getToken() +
            "&time=" +
            new Date();
        console.log(this.imagePath);
      }
    },
    // 正常模式
    queryClick() {
      var _this = this;
      queryById({
        id: this.docForm.docId,
      }).then((res) => {
        console.log(res);
        _this.docForm = res.data;
        if (res.data.formData) {
          _this.docForm.formData = JSON.parse(res.data.formData);
        }
        _this.manageClick(res.data);
        _this.loadLogList();
        _this.showImage();
      });
    },
    // 从待办任务过来
    toDoQueryClick() {
      var _this = this;
      procDoc({
        processInstanceId: this.processInstanceId,
      }).then((res) => {
        console.log(res);
        _this.docForm = res.data;
        if (res.data.formData) {
          _this.docForm.formData = JSON.parse(res.data.formData);
        }
        _this.manageClick(res.data);
        _this.loadLogList();
      });
    },
    manageClick(data) {
      console.log(data);
      var _this = this;
      this.formData = data.formJson;
      if (data.formKey) {
        getAction(
            "/flowable/form/queryById",
            {
              id: data.formKey,
            },
            false
        ).then(({ data }) => {
          if (data.formJson) {
            _this.formData = JSON.parse(data.formJson);
          }
        });
      }
    },
    // 操作
    loadLogList() {
      var _this = this;
      console.log(this.taskForm);
      logList(
          {
            logTypeId: _this.docForm.docId,
            logType: "04",
          },
          false
      ).then((res) => {
        _this.operationLog = res.data;
        console.log(res);
      });
    },
    refreshClick() {
      var _this = this;
      this.refreshLoading = true;
      if (_this.executeTaskId) {
        this.toDoQueryClick();
      } else {
        this.queryClick();
      }
      setTimeout(function () {
        _this.refreshLoading = false;
      }, 1000);
    },
    deteleClick() {
      var _this = this;
      softDelete({
        ids: _this.docForm.docId,
      }).then((res) => {
        _this.$store
            .dispatch("tagsView/delView", _this.$route)
            .then(({ visitedViews }) => {
              _this.$router.push({
                path: "/document/index",
              });
            }); // 关闭当前tab回到列表
      });
    },
    edidClick() {
      var _this = this;
      var data = {
        docType: this.docForm.docType,
        dirId: this.docForm.dirId,
        docId: this.docForm.docId,
      };
      this.$router.push({
        path: "/document/edit",
        query: {
          data: JSON.stringify(data),
        },
      });
    },
    startClick() {
      var _this = this;
      processStart({
        docId: this.docForm.docId,
      }).then(({ msg }) => {
        Message.success(msg);
        _this.queryClick();
      });
    },
    btnClaim() {
      var _this = this;
      putAction("/flowable/task/claim", {
        taskId: this.executeTaskId,
      })
          .then(({ msg }) => {
            this.toDoQueryClick();
            this.btnExcuteTask();
          })
          .catch((response) => {
            this.toDoQueryClick();
          });
    },
    btnExcuteTask() {
      this.dialogExcuteTaskVisible = true;
    },
    btnUnclaim() {
      putAction("/flowable/task/unclaim", {
        taskId: this.executeTaskId,
      }).then(({ msg }) => {
        Message.success(msg);
        this.toDoQueryClick();
      });
    },
    fileClick(data) {
      window.open(data.fileUrl, "_blank");
    },
    // 保存附件
    uploadSave() {
      let _this = this;
      _this.docForm.formData = JSON.stringify(_this.docForm.formData)
      update(_this.docForm).then((res) => {
        _this.queryClick()
        _this.$refs.upload.sucessClick();
      });
    },
    returnUrl(data) {
      var docFilePath = {
        fileName: data.name,
        fileUrl: data.url,
      };
      this.docForm.docFilePath.push(docFilePath);
    },
    uploadListDel(index) {
      this.docForm.docFilePath.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
  overflow-y: auto;
}

.details {
  z-index: 1;
  margin-top: 0;
  flex: none;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 -1px 0 0 #dadee3;
  padding: 10px 10px;
  box-sizing: border-box;
}

.details-header-button {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.details-header-button-icon {
  padding: 8px 8px;
  color: #909aaa;
  font-size: 18px;
  margin-left: 10px;
  border-radius: 50%;
}

.details-header-button-icon:hover {
  background-color: #f5f6f8;
}

.refreshRe {
  -webkit-animation: rotate 1.2s linear infinite;
  /*Safari and Chrome*/
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -moz-transform: rotate(0deg);
    /* Firefox */
    -o-transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -moz-transform: rotate(360deg);
    /* Firefox */
    -o-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
  }
}

.details-content {
  padding: 15px 24px;
  width: 100%;
  flex-grow: 1;
  /* overflow-y: auto; */
}

.details-content-title {
  font-size: 24px;
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 12px;
  display: block;
}

.details-content-misc {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.item {
  margin-right: 5px;
}

.details-content-misc-name {
  color: #333333;
  font-size: 14px;
}

.details-content-misc-name:hover {
  color: #2c7ef8;
}

.details-content-misc-subtitle {
  color: #909aaa;
  font-size: 12px;
}

.details-content-fields {
  flex: 1;
  padding: 8px 16px;
  background-color: #fafbfb;
  /* margin-top: 10px; */
  border-radius: 4px;
  position: relative;
}

.details-content-richtext {
  flex: 1;
  min-height: 40px;
  margin-top: 10px;
}

.details-content-subtask {
  margin-top: 10px;
  flex: 1;
}

.details-content-subtask-title {
  color: #333;
  font-size: 12px;
  margin-bottom: 10px;
  font-weight: bold;
  display: block;
}

.details-content-operation-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px 5px;
  box-shadow: inset 0 -1px 0 0 #dadee3;
}

.details-content-operation-item:last-child {
  box-shadow: inset 0 -1px 0 0 white;
}

/deep/.el-tabs__header {
  margin-bottom: 0px;
}

.details-content-operation-item-icon {
  font-size: 14px;
  color: #909aaa;
  margin-right: 10px;
}

.details-content-operation-item-name {
  font-size: 16px;
  color: #333333;
  margin-right: 5px;
}

.details-content-operation-item-title {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  margin-right: 10px;
}

.details-content-operation-item-date {
  font-size: 12px;
  color: #909aaa;
}

.task-enclosure-icon {
  color: #2e405e;
  font-size: 16px;
  margin-right: 5px;
  font-weight: 700;
  cursor: pointer;
}

.task-enclosure-title {
  color: #2e405e;
  font-size: 14px;
  margin-right: 16px;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.details-content-isMask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* background-color: rgba(255, 255, 255); */
}
</style>
